.hero-overlay,
.hero-video-wrap,
.hero-poster {
	inset: 0;
}

/*
  Cover behavior: fill the hero box while preserving the video's 16:9 ratio,
  cropping the minimum amount on whichever axis overflows.

  Both dimensions are measured against the WRAPPER itself using container-query
  units (cqw/cqh), never the viewport. The hero is height-clamped
  (min/max-height), so on large/4K screens the wrapper is far wider than the
  viewport's 16:9 -- viewport-based or media-query sizing mis-judged the axis
  and squared the video. Reading the wrapper directly avoids that entirely.

    width  = max(100% of wrapper width, wrapper height * 16/9)
    height = derived from width via aspect-ratio: 16/9

  The max() guarantees the video is at least as wide as needed to cover by
  width AND tall enough (via the ratio) to cover by height, so the larger
  axis always wins and 16:9 is preserved at every size.

  Positioning (absolute, top-50 start-50 translate-middle) comes from the
  Bootstrap utilities on the iframe in template.hbs; only sizing lives here.
*/
.hero-video-wrap {
	container-type: size;
}

.hero-video-wrap iframe {
	width: max(100cqw, calc(100cqh * 16 / 9));
	height: auto;
	aspect-ratio: 16 / 9;
}